<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery简便实现遮罩层--柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="button" onclick="show_keleyi_com()" value="显示遮罩层" /> 显示遮罩层后点击右上角关闭



<script type="text/javascript">
$("<div id='div_brg_keleyi_com'></div>").css({
    position:'absolute',
    top:0,
    left:0,
    backgroundColor:"#ddd",
    opacity:0.5,
    zIndex:300
}).height($(document).height()).width($(document).width()).hide().appendTo("body")

//需要遮罩的时候
function show_keleyi_com() {
    $("#div_brg_keleyi_com").show();
}

$("#close_ke"+"leyi_com").click(function () {
//取消遮罩的时候
$("#div_brg_keleyi_com").hide();
}
)</script>
</body>
</html>